<template>
  <!-- 每个模版页必须有一个根节点标签 -->
  <div>
    <!-- 这里就是组件页面显示的内容 -->
    <canvas id="QRCode_header" ></canvas>
    <!-- <div>子组件：{{ qrUrl }}</div> -->
  </div>
</template>
<script>
//引入外部组件
//import menu from ''
import QRCode from "qrcode";
export default {
  name: "Qrcode", //定义组件的名称
  props:{//新建对外暴露的属性用于，从父组件传值过来
    qrUrlStr:String
  },
  data() {
    return {
      //定义一个url
      qrUrl:this.qrUrlStr
    };
  },
  watch:{//监控父组件传递子组件值的变化，如果变化则更新
    qrUrlStr:{
      handler(newValue,oldValue){
        //console.log("更新"+newValue);
        this.qrUrl = newValue;//更新数据
        this.getQRCode();//生成二维码
      },
      deep:true, //深度监控
    }
  },
  mounted() {
    this.getQRCode();
  },
  methods: {//设置带参数传递，从父组件往子组件传递地址，让该二维码生成组件可以复用
    getQRCode() {  
    //生成的二维码为URL地址js   
      let opts = {
        errorCorrectionLevel: "H", //容错级别
        type: "image/png", //生成的二维码类型
        quality: 0.3, //二维码质量
        margin: 0, //二维码留白边距
        width: 250, //宽
        height: 250, //高
        text: "http://www.xxx.com", //二维码内容
        color: {
          dark: "#333333", //前景色
          light: "#fff", //背景色
        },
      };
      
      let msg = document.getElementById("QRCode_header");
      // 将获取到的数据（val）画到msg（canvas）上
      QRCode.toCanvas(msg, this.qrUrl, opts, function (error) {
        if (error) {
          console.log("二维码加载失败", error);
          this.$message.error("二维码加载失败");
        }
      });
    },
  },
};
</script>
<style scoped>
/* 独立组件的样式，写这里，支持标准的css语法 */
</style>